<style scoped>
.time {
  font-size: 14px;
}

.content {
  font-weight: bold;
  padding-left: 5px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.crud-opts {
  padding: 6px 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.crud-opts .crud-opts-right {
  margin-left: auto;
}
</style>
<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>正在执行队列列表</span>
      </div>
      <!--工具栏-->
      <div class="head-container">
        <crud-operation/>
      </div>
      <!--表格渲染-->
      <el-table v-loading="crud.loading" ref="table" :data="crud.data" style="width: 100%;"
                @select="crud.selectChange" @select-all="crud.selectAllChange"
                @selection-change="crud.selectionChangeHandler" border stripe
                :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }">
        <el-table-column
          v-if="columns.visible('appCode')"
          :show-overflow-tooltip="true"
          label="应用编码"
          prop="appCode"
        />
        <el-table-column
          v-if="columns.visible('bizDate')"
          :show-overflow-tooltip="true"
          label="业务日期"
          prop="bizDate"
        >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.bizDate }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columns.visible('agentCode')"
          :show-overflow-tooltip="true"
          label="执行节点编码"
          prop="agentCode"
        />
        <el-table-column
          v-if="columns.visible('jobCode')"
          :show-overflow-tooltip="true"
          label="作业编码"
          prop="jobCode"
        />
        <el-table-column
          v-if="columns.visible('taskCode')"
          :show-overflow-tooltip="true"
          label="任务编码"
          prop="taskCode"
        />
        <el-table-column
          v-if="columns.visible('taskName')"
          :show-overflow-tooltip="true"
          label="任务名称"
          prop="taskName"
        />
        <el-table-column v-if="columns.visible('resNum')" :show-overflow-tooltip="true" label="资源数" prop="resNum"/>
        <el-table-column v-if="columns.visible('priorityLevel')" :show-overflow-tooltip="true" label="优先级"
                         prop="priorityLevel"/>
        <el-table-column
          v-if="columns.visible('shellPath')"
          :show-overflow-tooltip="true"
          label="脚本目录"
          prop="shellPath"
        />
        <el-table-column
          v-if="columns.visible('taskTrackList')"
          :show-overflow-tooltip="true"
          label="查看详情"
          prop="taskTrackList"
        >
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover">
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in scope.row.taskTrackList"
                  :key="index"
                  :type="activity.type"
                  :timestamp="activity.upTs">
                  <i class="el-icon-time" style="color:green;" v-if="activity.dealRes==true"></i>
                  <i class="el-icon-time" style="color: red;" v-if="activity.dealRes==false"></i>
                  {{ formatterType(activity.type, activity.msg) }}
                </el-timeline-item>
              </el-timeline>
              <el-button slot="reference">查看详情</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columns.visible('mapKey')"
          :show-overflow-tooltip="true"
          label="MapKey"
          prop="mapKey"
        />
        <el-table-column
          v-if="columns.visible('execStTs')"
          width="200"
          :show-overflow-tooltip="true"
          label="开始执行时间"
          prop="execStTs"
        >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.execStTs }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import crudOperation from "@crud/extend/components/CRUD.OnlyLookOperation"

const queryList = [
  {cloumValue: "appCode", cloumName: "应用编码"},
  {cloumValue: "bizDate", cloumName: "业务日期"},
  {cloumValue: "jobCode", cloumName: "作业编码"},
  {cloumValue: "taskCode", cloumName: "任务编码"},
  {cloumValue: "taskName", cloumName: "任务名称"},
  {cloumValue: "mapKey", cloumName: "mapKey"}

];

//默认去查询
const defaultCrud = CRUD({
  title: '正在执行队列', sort: 'sort,asc', url: 'api/queue/qryRunningQueue',
  queryList: queryList
})
const defaultForm = {}

export default {
  name: 'running',
  components: {crudOperation},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['task_status', 'task_track_type'],
  props: {},
  data() {
    return {
      permission: {
        add: ['admin', 'running:add'],
        del: ['admin', 'running:del'],
        edit: ['admin', 'running:edit'],
      }
    }

  },
  methods: {
    taskStatusFormatter(row, column) {
      return this.dict.label.task_status[row.taskStatus];
    },
    formatterType(type, msg) {
      return this.dict.label.task_track_type[type] + ": \n" + msg;
    }
  }
}
</script>
